<template>
  <div v-if="show">
    <div class="dialog" :style="'height:' + height + 'vh;'">
      <!-- 遮罩 -->
      <slot></slot>
    </div>
    <div @click.capture="hide" class="mask" v-if="mask"></div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
      default: 30,
    },
    mask: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 关闭弹层
    hide() {
      this.$emit("update:show", false); // 用 .sync 来修饰
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.dialog {
  width: 100%;
  background-color: rgb(255, 255, 255);
  overflow: scroll;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: 70px;
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
